import React, { Component } from 'react';
import PropTypes from "prop-types";

import {nanoid} from "nanoid";
import "./index.css";

export default class Header extends Component {
	// 对接收的props数据类型进行限制
	static propTypes={
		addTodo:PropTypes.func.isRequired
	};

	// 处理输入框时间监听
	handleKeyUp=(event)=>{
		if(event.keyCode !== 13) return;
		if(event.target.value.trim()){
			const todoObj={
				id:nanoid(),
				name:event.target.value,
				todo:false
			};
			this.props.addTodo(todoObj);
			event.target.value="";
		}else{
			alert("输入不能为空");
		};
	};
	render() {
		return (
			<div className="todo-header">
				<input type="text" onKeyUp={this.handleKeyUp} placeholder="请输入你的任务名称，按回车键确认" />
			</div>
		);
	};
};
